<template>
  <!-- 系统整体页面布局 -->
  <el-container class="el-container">
    <!-- 顶部菜单栏 -->
    <el-header class="el-header">
      <div class="back" @click="back"></div>
    </el-header>
    <el-container>
      <!-- 左侧菜单栏部分 -->
      <el-aside class="el-aside" style="width: 14vw">
        <el-scrollbar>
          <div class="title">
            <!-- <span class="titletext">任务三</span> -->
          </div>
          <div class="titletwo">
            <span class="titletext">社会主义建设道路初步探索的理论成果</span>
          </div>
          <div style="margin-top: 4vh">
            <el-menu
              class="el-menu"
              :unique-opened="false"
              :collapse-transition="false"
              default-active="0"
              :default-openeds="openeds"
              text-color="#ffffff"
              router
            >
              <el-submenu index="fourziyuangongji">
                <template slot="title">
                  <span class="el-submenuone">课程资源</span>
                </template>

                <el-menu-item-group>
                  <el-menu-item index="fourAudiovisual"
                    >红色资源建设名录库</el-menu-item
                  >
                  <el-menu-item index="fourAudiovisualtwo"
                    >红色影音资源库</el-menu-item
                  >
                  <el-menu-item index="fourAudiovisualthree"
                    >教学案例资源库教学</el-menu-item
                  >
                  <el-menu-item index="fourAudiovisualfour"
                    >毛泽东思想专题教室</el-menu-item
                  >
                  <el-menu-item index="fourAudiovisualfive"
                    >虚拟仿真资源库</el-menu-item
                  >
                </el-menu-item-group>
              </el-submenu>
              <el-submenu index="fourBeforeClass">
                <template slot="title">
                  <span class="el-submenuone">课前学习</span>
                </template>

                <el-menu-item-group>
                  <el-submenu index="fourPreview">
                    <template slot="title">
                      <span class="el-submenuone">学思知史</span>
                    </template>

                    <el-menu-item-group>
                      <el-menu-item index="fourvaluateone">发布任务</el-menu-item>
                      <el-menu-item index="fourvaluatetwo">任务评价</el-menu-item>
                    </el-menu-item-group>
                  </el-submenu>
                </el-menu-item-group>
              </el-submenu>
              <el-submenu index="foursecond">
                <template slot="title">
                  <span class="el-submenuone">课中学习</span>
                </template>

                <el-menu-item-group>
                  <el-submenu index="fourreleasethree">
                    <template slot="title">
                      <span class="el-submenuone">明理增信</span>
                    </template>

                    <el-menu-item-group>
                      <el-menu-item index="fourmodelone">任务展示</el-menu-item>
                      <!-- <el-menu-item index="threemodeltwo">讲好故事</el-menu-item>
                      <el-menu-item index="threemodelthree">讲透道理</el-menu-item>
                      <el-menu-item index="threemodelfour">链接专业</el-menu-item>
                      <el-menu-item index="threemodelfive">学习评价</el-menu-item> -->
                    </el-menu-item-group>
                  </el-submenu>
                </el-menu-item-group>
              </el-submenu>
              <el-submenu index="fourafterclassthree">
                <template slot="title" class="trytrytry">
                  <span class="el-submenuone">课后学习</span>
                </template>
                <el-menu-item-group>
                  <!-- <el-menu-item index="expandthree">践悟笃行</el-menu-item> -->
                  <el-submenu index="fourexpandthree">
                    <template slot="title" class="trytrytry">
                      <span class="el-submenuone">践悟笃行</span>
                    </template>
                    <el-menu-item-group>
                      <el-menu-item index="fourexpandone">模拟导游</el-menu-item>
                      <el-menu-item index="fourexpandtwo">文物代言</el-menu-item>
                      <el-menu-item index="fourexpandthreethree"
                        >全程画像</el-menu-item
                      >
                    </el-menu-item-group>
                  </el-submenu>
                </el-menu-item-group>
              </el-submenu>
              <el-submenu index="fourzhuanyelianhe">
                <template slot="title" class="trytrytry">
                  <span class="el-submenuone">专业联合</span>
                </template>
                <el-menu-item-group>
                  <el-menu-item index="fouranalysisthree"
                    >我为大家做导游</el-menu-item
                  >
                </el-menu-item-group>
              </el-submenu>
              <el-submenu index="fourpingjiajiance">
                <template slot="title" class="trytrytry">
                  <span class="el-submenuone">评价检测</span>
                </template>
                <el-menu-item-group>
                  <el-menu-item index="fourevaluatethree">认知达成</el-menu-item>
                  <el-menu-item index="fourimitatethree">思想认同</el-menu-item>
                  <el-menu-item index="fourputintoeffectthree"
                    >实践参与</el-menu-item
                  >
                </el-menu-item-group>
              </el-submenu>

              <!-- <MenuTree :menuList="menuList"></MenuTree> -->
            </el-menu>
          </div>
        </el-scrollbar>
      </el-aside>
      <!-- 页面头部区域 高度默认60px -->

      <!-- 右侧主题页面内容展示 -->
      <el-main class="el-mian">
        <!-- 路由页面 -->
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
// import MenuTree from "@/components/menu/menustree.vue";
// import Bread from "@/components/Bread.vue"; //引入组件
export default {
  name: "Home",
  components: {
    // MenuTree,
    // Bread,
  },
  data() {
    return {
      openeds: ["BeforeClassfour", "2", "afterclassfour"], //默认展开导航栏
      currentRoute: this.$router.currentRoute.name, // 获取当前路由名称
    };
  },
  methods: {
    tryit() {
      this.trytry = !this.trytry;
      this.$router.push("/one");
    },
    back() {
      this.$router.push("/first");
    },
  },
};
</script>

<style lang="scss">
.float {
  color: white;
}
.texttext {
  color: white;
}

.title {
  margin-top: 4vh;
  .titletext {
    margin-left: 2.1vw;
    color: #fff;
    font-weight: 700;
    font-size: 1.1vw;
  }
}
.titletwo {
  margin-top: 1vh;
  text-align: center;
  .titletext {
    color: #fff;
    font-weight: 700;
    font-size: 1.1vw;
  }
}

.el-menu-item.is-active {
  // background: linear-gradient(to left, transparent, #ac8f66) !important;
  background: linear-gradient(to left, transparent, #ac8f66);
  color: #fff;
  // color: #0958b1 !important;
}
.el-submenu__title:hover {
  // background: linear-gradient(to right, transparent, #ac8f66) !important;
  // background-color: #0e62c2;
  color: #fff !important;
  background-color: #82725b;
  transition: 0.6s;
}
.el-menu-item:hover {
  // background: linear-gradient(to right, transparent, #ac8f66) !important;
  background: linear-gradient(to right, transparent, #ac8f66) !important;
  color: #fff !important;
  transition: 0.6s;
}

.el-menu-item {
  // text-align: right;
  font-weight: 600;
  margin-bottom: 10px;
  font-size: 20px;
  // width: 1vw !important;
  margin-left: 15%;
  // border-radius: 50px;
}
.el-menu-item-group__title{
  padding-top: 0;
}
.el-submenuone {
  font-size: 1.25vw;
  margin-left: 2.5vw !important;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 100%;
  border: none !important;
  z-index: -1;
}
.el-scrollbar__wrap {
  overflow-x: hidden;
}

.el-scrollbar {
  height: 100%;
}

/*铺满屏幕，没有边距*/
.el-container {
  padding: 0px;
  margin: 0px;
  height: 100wh;
}

.el-aside {
  width: 200px;
  // min-height: calc(100vh - 60px);
  // background-image: url(@/assets/cebian.png) !important; 
  background-color: #ccc;
}
.el-scrollbar__view {
  // background-image: url(@/assets/cebian.png) !important;
  background-color: #ccc;
}
.el-menu {
  width: 100%;
  min-height: 100%;
  // background-image: url(@/assets/cebian.png);
  background-color: #ccc;

  // position: relative;
}

.el-mian {
  background-color: #eaedf1;
  padding: 0px;
  margin: 0px;
  height: calc(100vh - 60px);
}
// .top {
//   color: white;
//   padding: 50px;
//   text-align: center;
// }
/*隐藏小箭头样式*/
.el-submenu.is-opened > .el-submenu__title .el-submenu__icon-arrow {
  display: none;
}

.el-submenu > .el-submenu__title .el-submenu__icon-arrow {
  display: none;
}

.el-header {
  /* 顶部部分的高度(默认60px) */
  // background-color: #8df !important;
  // background-image: url(@/assets/shang.jpg);
  // background-image: url(@/assets/images/big/头.png);

  background-size: 100% 100%;
  font-size: 18px !important;
  position: relative;
  // display: flex;
  justify-content: space-between;
  height: 10vh !important;
  position: relative;
  .back {
    position: absolute;
    right: 8.6vw;
    top: 4.2vh;
    width: 2.2vw;
    height: 1.5vh;
    // background-color: #fff;
  }
}
</style>
